<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
  <ul>
    <li id="0">ok</li>
    <li id="1"><span>hehe</span><span>hehe</span></li>
    <li id="2">ok</li>
    <div>what</div>
  </ul>
</body>
  <script>
    var ul = document.querySelectorAll('ul')[0]

    function Proxy(agent, judgeFn, cb){
      agent['onclick'] = function(evt){
        var node = evt.target
        function helper(node){
          if(node === agent){
            return
          }
          if(judgeFn(node)){
            cb(node)
            evt.stopPropagation()
          }
          helper(node.parentNode)
        }
        helper(node)
      }
    }
    Proxy(ul, function(node){
      return node.tagName === "LI"
    }, function(node){
      console.log(node.id)
    })

  </script>
</html>
